/*
 * @Date: 2023-12-22 08:58:09
 * @LastEditors: lyx
 * @LastEditTime: 2024-02-28 08:45:59
 * @FilePath: \taro-template3\src\components\MsgQuickAction\index.tsx
 * @Description: 最后一个问答的答案显示“重新生成、播报、点赞、点踩”操作图标，长按显示全部操作
 */
import { View } from "@tarojs/components";
import cName from "classnames";
import styles from "./index.module.scss";
import {
  PlayStart,
  Reload,
  ThumbsDown,
  ThumbsUp,
  Agenda,
} from "@nutui/icons-react-taro";
import { Toast } from "@nutui/nutui-react-taro";
import { ACTON_OPTIONS, MSG_ACTION_PUP_TOAST_ID } from "../MsgActionPup/hooks/store";
import { useContext, useState } from "react";
import { ChatContext } from "@/pages/index/hooks/store";

function MsgQuickAction(props: IMsgQuickActionProps) {
  const { msgContent, handleActionClick } = props;
  const { reLoad, toPlay, toFeedback } = useContext(ChatContext);

  const handleClick = (key = "") => {
    console.log('handleClick key ', key, msgContent);
    if (key === ACTON_OPTIONS.reload) {
      reLoad(msgContent);
    } else if (key === ACTON_OPTIONS.play) {
      toPlay(msgContent);
    } else if (key === ACTON_OPTIONS.thumbsUp) {
      toFeedback({
        feedback: ACTON_OPTIONS.thumbsUp,
        id: msgContent.id
      });
    } else if (key === ACTON_OPTIONS.thumbsDown) {
      toFeedback({
        feedback: ACTON_OPTIONS.thumbsDown,
        id: msgContent.id
      });
    } else {
      Toast.show(MSG_ACTION_PUP_TOAST_ID, {
        title: "操作成功",
        type: "text",
        duration: 1,
        lockScroll: true,
        onClose: () => {
          console.log("close");
        },
      });
    }
  };

  return (
    <View className={styles["msg-quick-action-wrapper"]}>
      <View
        className={cName(styles["action-item"])}
        onClick={() => {
          handleClick(ACTON_OPTIONS.reload);
        }}
      >
        <Reload size="1rem" />
        <text className={styles["action-label"]}>重新生成</text>
      </View>
      <View className={cName(styles["placeholder-item"])}></View>
      <View
        className={cName(styles["action-item"], styles["right-item"])}
        onClick={() => {
          handleActionClick();
        }}
      >
        <Agenda size="1rem" />
      </View>
      <View
        className={cName(
          styles["action-item"], styles["right-item"],
          {
            [styles["active"]]: msgContent.speaking
          }
        )}
        onClick={() => {
          handleClick(ACTON_OPTIONS.play);
        }}
      >
        <PlayStart size="1rem" />
      </View>
      <View
        className={cName(
          styles["action-item"], styles["right-item"],
          {
            [styles["active"]]: msgContent?.feedback === ACTON_OPTIONS.thumbsUp
          }
        )}
        onClick={() => {
          if (msgContent?.feedback === ACTON_OPTIONS.thumbsUp) {
            return;
          }
          handleClick(ACTON_OPTIONS.thumbsUp);
        }}
      >
        <ThumbsUp size="1rem" />
      </View>
      <View
        className={cName(
          styles["action-item"], styles["right-item"],
          {
            [styles["active"]]: msgContent?.feedback === ACTON_OPTIONS.thumbsDown
          }
        )}
        onClick={() => {
          if (msgContent?.feedback === ACTON_OPTIONS.thumbsDown) {
            return;
          }
          handleClick(ACTON_OPTIONS.thumbsDown);
        }}
      >
        <ThumbsDown size="1rem" />
      </View>
    </View>
  );
}

export default MsgQuickAction;
